import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 转账
///
class TransferAccount extends StatefulWidget {
  const TransferAccount({Key? key}) : super(key: key);

  @override
  State<TransferAccount> createState() => _TransferAccountState();
}

class _TransferAccountState extends State<TransferAccount> {
  List<_User> users = [];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 10; i++) {
      users.add(_User(account: 'Honor${i + 1}', mobile: '135571973$i'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar:
          ToolsUtils.getDefaultBrnAppBar('转账', actions: ToolsUtils.actions('转账记录', pressed: () {
            Get.toNamed(RouteGet.financeTransferRecord);
          })),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(Sizes.default15),
        child: Column(
          children: [
            Container(
              height: Sizes.default50,
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              child: Row(
                children: [
                  Center(
                    child: Text(
                      '对方账户',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color333, fontSize: Sizes.default15),
                    ),
                  ),
                  Expanded(
                      child: Container(
                    height: Sizes.default50,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                    alignment: Alignment.centerLeft,
                    child: TextField(
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color363, fontSize: Sizes.default16),
                      decoration: InputDecoration(
                          border: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                          ),
                          isCollapsed: true,
                          filled: true,
                          fillColor: ColorsUtils.rgba(247, 247, 247, 1),
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: Sizes.default10, vertical: Sizes.default10),
                          constraints: const BoxConstraints(minHeight: Sizes.default40),
                          hintText: '用户名/手机号码',
                          hintStyle: StylesUtils.customTextStyle(
                              fontSize: Sizes.default15, color: ColorsUtils.color999)),
                      keyboardType: TextInputType.text,
                      textAlign: TextAlign.left,
                      onChanged: (String content) {},
                    ),
                  )),
                  Center(
                      child: TextButton(
                          onPressed: () async {
                            String result = await Get.toNamed(RouteGet.scanQrscan);
                            debugPrint('result = $result');
                          },
                          child: ToolsUtils.getUrlSvg(
                              'https://cdn7.axureshop.com/demo/1525603/images/余额转账/u2042.svg',
                              width: Sizes.default16,
                              height: Sizes.default16)))
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: Sizes.default20),
              child: Text(
                '温馨提示：转账成功后金额将实时转入对方账户，无法退款，仅支持小默外卖账户转账。',
                style: StylesUtils.customTextStyle(
                    fontSize: Sizes.default13, color: ColorsUtils.color797, lineHeight: 1.5),
              ),
            ),
            SizedBox(
              height: Sizes.default50,
              child: FractionallySizedBox(
                heightFactor: 0.9,
                widthFactor: 1.0,
                child: GFButton(
                    onPressed: openAlert,
                    text: '下一步',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              ),
            )
          ],
        ),
      ),
    );
  }

  openAlert() {
    showDialog(
        context: context,
        builder: (_) {
          return Material(
            color: Colors.transparent,
            child: Center(
              child: Container(
                  width: 320,
                  height: 350,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(Sizes.default10),
                  ),
                  child: Column(
                    children: [
                      Container(
                        height: Sizes.default50,
                        alignment: Alignment.center,
                        child: Text(
                          '查询到多个帐号，请核实后选择',
                          style: StylesUtils.customTextStyle(
                              fontSize: Sizes.default16, color: ColorsUtils.color333),
                        ),
                      ),
                      Expanded(
                          child: ListView.builder(
                        padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
                        itemBuilder: (BuildContext _, int index) {
                          var user = users[index];
                          return InkWell(
                            onTap: () {
                              Navigator.of(_).pop();
                              Future.delayed(const Duration(milliseconds: 50), () {
                                Get.toNamed(RouteGet.financeTransferConfirm);
                              });
                            },
                            child: Container(
                              height: 60,
                              padding: const EdgeInsets.only(bottom: Sizes.default15),
                              child: Row(
                                children: [
                                  Align(
                                    alignment: Alignment.centerLeft,
                                    child: ToolsUtils.getUrlSvg(user.header,
                                        width: Sizes.default50, height: Sizes.default50),
                                  ),
                                  Expanded(
                                      child: Container(
                                        padding: const EdgeInsets.only(left: Sizes.default15),
                                        alignment: Alignment.centerLeft,
                                        child: Column(
                                          children: [
                                            Expanded(
                                                flex: 3,
                                                child: Container(
                                                  alignment: Alignment.centerLeft,
                                                  child: Text(
                                                    user.account,
                                                    style: StylesUtils.customTextStyle(
                                                        color: ColorsUtils.color363),
                                                  ),
                                                )),
                                            Expanded(
                                                flex: 2,
                                                child: Container(
                                                  alignment: Alignment.centerLeft,
                                                  child: Text(
                                                    user.mobile,
                                                    style: StylesUtils.customTextStyle(
                                                        color: ColorsUtils.color797,
                                                        fontSize: Sizes.default13),
                                                  ),
                                                )),
                                          ],
                                        ),
                                      ))
                                ],
                              ),
                            ),
                          );
                        },
                        itemCount: users.length,
                      ))
                    ],
                  )),
            ),
          );
        });
  }
}

class _User {
  String header;

  String account;

  String mobile;

  _User(
      {this.header = 'https://cdn7.axureshop.com/demo/1525603/images/余额转账/u2023.svg',
      required this.account,
      required this.mobile});
}
